<template>
  <div v-if="show" class="modal-overlay" @click.self="closeModal">
    <div class="modal-content exam-selector">
      <div class="modal-header">
        <h3>选择要批改的考试</h3>
        <button @click="closeModal" class="close-button">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div v-if="availableExams && availableExams.length > 0" class="exam-list">
          <div
            v-for="exam in availableExams"
            :key="exam.id"
            class="exam-item"
            @click="selectExam(exam)"
            tabindex="0"
            @keydown.enter="selectExam(exam)"
            @keydown.space.prevent="selectExam(exam)"
          >
            <div class="exam-info">
              <h4>{{ exam.name }}</h4>
              <p class="exam-dates">{{ formatDate(exam.startTime) }} - {{ formatDate(exam.endTime) }}</p>
              <div class="exam-stats">
                <span><i class="fas fa-users"></i> {{ exam.participantCount }} 人参与</span>
                <span><i class="fas fa-check-circle"></i> {{ exam.gradedCount || 0 }} 已批改</span>
              </div>
            </div>
            <div class="exam-status">
              <span :class="['status-label', getExamStatusClassVisual(exam.status)]">{{ exam.status }}</span>
            </div>
             <i class="fas fa-chevron-right select-arrow"></i>
          </div>

    <Pagination
:totalItems="totalItems"
:itemsPerPage="10"
:initialPage="1"
@page-change="handlePageChange"
    />
        </div>
        <div v-else class="no-exams">
            <p>没有可供选择的考试。</p>
        </div>
      </div>
    </div>

  </div>

</template>

<script setup>
// ... (script remains the same)
import { formatDate, getExamStatusClass } from '../utils'; // Assuming getExamStatusClass gives CSS classes

import { defineProps, defineEmits } from 'vue';
import Pagination from '@/components/commont/Pagination.vue';




const props = defineProps({
  show: Boolean,
  availableExams: Array,
  totalItems: {
    type: Number,
    default: 0
  },

}
);




const emit = defineEmits(['update:show', 'select-exam','page-change']);

const closeModal = () => {
  emit('update:show', false);
};

const handlePageChange = (page) => {
  // Emit page change event to parent component
  emit('page-change', page);
};

const selectExam = (exam) => {
  emit('select-exam', exam);
  // closeModal(); // Already called in ExamGrading.vue or should be if not handled by parent
};

// For visual purpose in template, can use utils one if it returns BEM style classes
const getExamStatusClassVisual = (status) => {
  switch (status) {
    case '进行中': return 'status-ongoing';
    case '已结束': return 'status-ended';
    case '未开始': return 'status-pending-exam';
    default: return 'status-unknown';
  }
};
</script>

<style scoped>
/* Generic Modal Styles - can be global or in ExamGrading.vue */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff; /* var(--modal-background-color) */
  padding: 20px;
  border-radius: 0.5rem; /* var(--border-radius) */
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); /* var(--box-shadow-lg) */
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dee2e6; /* var(--border-color) */
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #343a40; /* var(--dark-color) */
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d; /* var(--text-muted-color) */
}
.close-button:hover {
  color: #343a40; /* var(--dark-color) */
}

.modal-body {
  overflow-y: auto;
  flex-grow: 1; /* Allows body to take remaining space and scroll */
}
/* End Generic Modal Styles */


.exam-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.exam-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.75rem;
  border-bottom: 1px solid #e9ecef; /* Lighter border for list items */
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.exam-item:last-child {
  border-bottom: none;
}

.exam-item:hover, .exam-item:focus {
  background-color: #f8f9fa; /* var(--light-color) */
  outline: none; /* For focus state */
}

.exam-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: #007bff; /* var(--primary-color) */
}

.exam-dates {
  font-size: 0.8rem;
  color: #6c757d; /* var(--text-muted-color) */
  margin-bottom: 0.5rem;
}

.exam-stats {
  font-size: 0.8rem;
  color: #495057;
}

.exam-stats span {
  margin-right: 1rem;
}
.exam-stats i {
  margin-right: 0.25rem;
}

.exam-status .status-label {
  padding: 0.2em 0.5em;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 0.2rem;
  color: #fff;
  text-transform: uppercase;
}

.status-ended { background-color: #6c757d; /* var(--secondary-color) */ }
.status-ongoing { background-color: #28a745; /* var(--success-color) */ }
.status-pending-exam { background-color: #ffc107; color: #212529; /* var(--warning-color) */ }
.status-unknown { background-color: #adb5bd; }


.select-arrow {
  color: #adb5bd;
  font-size: 0.9rem;
}

.no-exams p {
    text-align: center;
    color: #6c757d; /* var(--text-muted-color) */
    padding: 2rem 0;
}
</style>
